<template>
	<view>
		<view class="edit-user-head">
			<image @tap="changUserHead" :src="userInfo.userHeadUrl" mode="aspectFill"></image>
			<view class="icon iconfont icon-pencil"></view>
		</view>

		<view class="user-from">
			<view class="from-item">
				<view class="lable">昵称</view>
				<view class="item-group"><input type="text" v-model="userInfo.nickName" placeholder-class="item-placeholder" placeholder="输入昵称" /></view>
			</view>

			<view class="from-item">
				<view class="lable">常驻城市</view>
				<view class="item-group">
					<input type="text" disabled="true" v-model="userInfo.city" placeholder-class="item-placeholder" placeholder="您的城市" />
					<view class="icon iconfont icon-dingwei"></view>
				</view>
			</view>

			<view class="from-item">
				<view class="lable">生日</view>
				<view class="item-group" @tap="calendarShow">
					<view :class="[!userInfo.birthday || userInfo.birthday === '' ? 'item-placeholder' : '']" class="uni-input">
						{{ !userInfo.birthday || userInfo.birthday === '' ? '请选择您的生日' : userInfo.birthday }}
					</view>
					<view class="icon iconfont icon-youjiantou"></view>
				</view>
			</view>

			<view class="from-item">
				<view class="lable">身高</view>
				<picker class="picker" @change="bindHeightChange" :value="userInfo.height" range-key="name" :range="heightArr">
					<view class="picker-item-group">
						<view :class="[!userInfo.height || userInfo.height === 0 ? 'item-placeholder' : '']" class="uni-input">
							{{ !userInfo.height || userInfo.height === 0 ? '请选择身高' : userInfo.height + ' CM' }}
						</view>
						<view class="icon iconfont icon-youjiantou"></view>
					</view>
				</picker>
			</view>

			<view class="from-item">
				<view class="lable">体重</view>
				<picker class="picker" @change="bindWeightChange" :value="userInfo.weight" range-key="name" :range="weightArr">
					<view class="picker-item-group">
						<view :class="[!userInfo.weight || userInfo.weight === 0 ? 'item-placeholder' : '']" class="uni-input">
							{{ !userInfo.weight || userInfo.weight === 0 ? '请选择体重' : userInfo.weight + ' KG' }}
						</view>
						<view class="icon iconfont icon-youjiantou"></view>
					</view>
				</picker>
			</view>

			<view class="from-item">
				<view class="lable">职业</view>
				<picker class="picker" @change="bindVocationChange" :value="vocation" range-key="name" :range="jobArr">
					<view class="picker-item-group">
						<view :class="[!vocation.name ? 'item-placeholder' : '']" class="uni-input">{{ vocation.name | vocation }}</view>
						<view class="icon iconfont icon-youjiantou"></view>
					</view>
				</picker>
			</view>

			<view class="from-item">
				<view class="lable">微信</view>
				<view class="item-group"><input type="text" v-model="userInfo.wechat" placeholder-class="item-placeholder" placeholder="输入微信号" /></view>
			</view>

			<view class="user-desc">
				<view class="lable">个人介绍</view>
				<view class="item-group-textarea">
					<textarea type="text" v-model="userInfo.userIntroduction" placeholder-class="item-placeholder" placeholder="写点个人介绍吧" />
				</view>
			</view>
		</view>

		<!-- 标签 -->
		<user-tag-tab title="我的标签" type="me" :dataArr="meTages" :activeTags="userInfo.me" @changeTag="changMeTag"></user-tag-tab>

		<user-tag-tab title="心仪标签" type="need" :dataArr="needTags" :activeTags="userInfo.need" @changeTag="changNeedTag"></user-tag-tab>

		<!-- 日期弹出层 -->
		<uni-popup ref="popup" type="bottom"><data-calendar @confirm="confirm" @cancer="cancer" :flag="birthdayFlage"></data-calendar></uni-popup>

		<uni-popup :maskClick="false" ref="loading" type="bottom"><view class="">保存中....</view></uni-popup>
	</view>
</template>

<script>
import dataCalendar from '../../components/user/data-calendar.vue';
import userTagTab from '../../components/user/user-tag-tab.vue';
import constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';
export default {
	components: {
		dataCalendar,
		userTagTab
	},
	data() {
		return {
			vocation: {
				type: 0,
				name: ''
			},
			userInfo: {},
			meTages: [],
			needTags: [],
			heightArr: [],
			weightArr: [],
			birthdayFlage: false,
			jobArr: [
				{ name: 'IT', value: 1 },
				{ name: '金融', value: 2 },
				{ name: '建筑', value: 3 },
				{ name: '个体户', value: 4 },
				{ name: '自由职业', value: 5 },
				{ name: '设计', value: 6 }
			]
		};
	},
	filters: {
		vocation(value) {
			if (!value) {
				return '请选择职业';
			} else {
				return value;
			}
		}
	},
	onLoad() {
		this.buildHeightArr();
		this.buildWeightArr();
		this.loadTag();
		this.loadMineInfo();
	},
	// 原生点击
	onNavigationBarButtonTap(e) {
		if (e.index === 0) {
			this.updateMine();
		}
	},
	methods: {
		calendarShow() {
			this.$refs.popup.open();
			this.birthdayFlage = true;
		},
		confirm(e) {
			this.userInfo.birthday = `${e.year}-${e.month < 10 ? '0' + e.month : e.month}-${e.day < 10 ? '0' + e.day : e.day}`;
			this.birthdayFlage = false;
			this.$refs.popup.close();
		},
		cancer() {
			this.birthdayFlage = false;
			this.$refs.popup.close();
		},
		buildHeightArr() {
			for (let i = 150; i <= 250; i++) {
				this.heightArr.push({ name: i + ' CM', value: i });
			}
		},
		buildWeightArr() {
			for (let i = 30; i <= 200; i++) {
				this.weightArr.push({ name: i + ' KG', value: i });
			}
		},
		bindHeightChange(e) {
			this.userInfo.height = this.heightArr[e.detail.value].value;
		},
		bindWeightChange(e) {
			this.userInfo.weight = this.weightArr[e.detail.value].value;
		},
		bindVocationChange(e) {
			this.vocation.type = this.jobArr[e.detail.value].value;
			this.vocation.name = this.jobArr[e.detail.value].name;
		},
		changUserHead() {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera '],
				success: res => {
					this.uploadUserHeard(res.tempFilePaths[0]);
				}
			});
		},
		changMeTag(index) {
			if (this.userInfo.me.length < 5) {
				this.userInfo.me.push(index);
			} else {
				this.userInfo.me.shift();
				this.userInfo.me.push(index);
			}
		},
		changNeedTag(index) {
			if (this.userInfo.need.length < 5) {
				this.userInfo.need.push(index);
			} else {
				this.userInfo.need.shift();
				this.userInfo.need.push(index);
			}
		},
		loadMineInfo() {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.mineInfoVo,
				header: constant.authHead(),
				method: 'GET',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						this.userInfo = res.data.data;
						this.vocation = this.jobArr.find(job => job.name === res.data.data.userJob);
					} else {
						showToast(res.data.msg);
					}
				},
				fail: r => {
					console.log(r);
				}
			});
		},
		loadTag() {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.tagInfo,
				header: constant.authHead(),
				method: 'GET',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						this.meTages = res.data.data.me;
						this.needTags = res.data.data.need;
					} else {
						showToast(res.data.msg);
					}
				},
				fail: r => {
					console.log(r);
				}
			});
		},
		updateMine() {
			this.$refs.loading.open();
			this.userInfo.userJob = this.vocation.name;
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.mineInfoVo,
				header: constant.authHead(),
				data: this.userInfo,
				method: 'PUT',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						uni.setStorageSync(constant.user, res.data.data);
						this.$refs.loading.close();
						showToast('编辑用户资料成功');
					} else {
						showToast(res.data.msg);
						this.$refs.loading.close();
					}
				},
				fail: r => {
					console.log(r);
					this.$refs.loading.close();
				}
			});
		},
		uploadUserHeard(temUrl) {
			let user = uni.getStorageSync(constant.user);
			uni.uploadFile({
				url: constant.baseHttpUri + constant.pathUri.userHeard,
				name: 'file',
				filePath: temUrl,
				header: {
					Authorization: `Bearer ${uni.getStorageSync('authToken')}`,
					'X-FILE-PATH': `${user.id}/userHeard`
				},
				success: res => {
					let data = JSON.parse(res.data);
					if (data.code === constant.dataCode.OK) {
						this.userInfo.userHeadUrl = data.data;
					} else {
						showToast(data.msg);
					}
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.edit-user-head {
	position: relative;
	background-color: #f5f7fa;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20rpx 0;
	image {
		width: 230rpx;
		height: 230rpx;
		border-radius: 50%;
	}

	.icon-pencil::before {
		background-color: #fafafa;
		padding: 8rpx;
		border-radius: 50%;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, -25%);
		padding: 8rpx;
		color: #999999;
		font-size: 30rpx;
		line-height: 30rpx;
	}
	.edit-user-img-title {
		margin-top: 10rpx;
		font-size: 34rpx;
		color: #999999;
	}
}

.user-from {
	.from-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-top: 20rpx;
		padding-left: 40rpx;
		.lable {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			width: 25%;
			margin-right: 18rpx;
			padding-bottom: 18rpx;
		}
		.item-group {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding-right: 40rpx;
			padding-bottom: 18rpx;
			border-bottom: 1rpx solid #eeeeee;
			width: 100%;
		}
		input {
			font-size: 28rpx;
			color: #333333;
		}
		.picker {
			width: 100%;
			margin-left: 0;
			padding-left: 0;
			padding-right: 40rpx;
			padding-bottom: 18rpx;
			border-bottom: 1rpx solid #eeeeee;
			.picker-item-group {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				width: 100%;
			}
		}

		.uni-input {
			width: 100%;
			font-size: 28rpx;
			color: #333333;
			margin: 0;
			padding: 0;
		}
		.item-placeholder {
			font-size: 28rpx;
			color: #999999;
		}
		.icon-dingwei::before {
			font-size: 34rpx;
			color: #999999;
		}
		.icon-youjiantou::before {
			font-size: 34rpx;
			color: #999999;
		}
	}

	.user-desc {
		display: flex;
		flex-direction: row;
		padding: 20rpx 40rpx 18rpx;

		.lable {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			width: 25%;
		}

		.item-group-textarea {
			display: flex;
			flex-direction: row;
			width: 77%;
			textarea {
				height: 100rpx;
				font-size: 28rpx;
				margin-top: 7rpx;
			}
		}
	}
}
</style>
